<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Split from "./Split.svelte";
    import { fn } from "storybook/test";

    const { Story } = defineMeta({
        title: "Components/Layout/Split",
        component: Split,
        tags: ["autodocs"],
        argTypes: {
            dir: {
                control: { type: "select" },
                options: ["v", "h"],
            },
        },
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <div style="height: 300px; border: 1px solid #ccc">
            <Split split="300px" max={500}>
                {#snippet prev()}
                    <div>LEFT</div>
                {/snippet}
                {#snippet next()}
                    <div>RIGHT</div>
                {/snippet}
            </Split>
        </div>
    {/snippet}
</Story>

<Story name="UpDown">
    {#snippet template(args)}
        <div style="height: 300px; border: 1px solid #ccc">
            <Split dir="h" split={0.3}>
                {#snippet prev()}
                    <div>TOP</div>
                {/snippet}
                {#snippet next()}
                    <div>BOTTOM</div>
                {/snippet}
            </Split>
        </div>
    {/snippet}
</Story>

<Story name="Complex">
    {#snippet template(args)}
        <div style="height: 300px; border: 1px solid #ccc">
            <Split split={0.5}>
                {#snippet prev()}
                    <Split dir="h" split={0.3}>
                        {#snippet prev()}
                            <div>TOP</div>
                        {/snippet}
                        {#snippet next()}
                            <div>BOTTOM</div>
                        {/snippet}
                    </Split>
                {/snippet}
                {#snippet next()}
                    <div>Right</div>
                {/snippet}
            </Split>
        </div>
    {/snippet}
</Story>
